import { useState, useEffect, useContext } from 'react';
import { Image, Toast } from 'antd-mobile';
import { AudioOutlined, AudioMutedOutlined } from '@ant-design/icons';
import { Camera, CameraDisabled, HangUp } from '../../../components/Icon';

import AvatarImage from '../../../components/AvatarImage';
import { ContentType } from '../../../constants';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function(props) {
  const { cid, isVedioEnable = true, isAudioEnable = true, onClose, avatarUrl, nickName, userName, userId, rtcAction } = props;
  const mySdkStore = useContext(MySdkStoreContext);
  const [videoEnable, setVideoEnable] = useState(isVedioEnable);
  const [audioEnable, setAudioEnable] = useState(isAudioEnable);

  // 监听通话用户挂断音视频事件
  const onParticipantLeaveRtcRoom = (res) => {
    const { leaveUserId } = res;
    Toast.show(`${leaveUserId}已挂断`);
    // onClose({ ...res, closeTime: res.jsLeaveTime });
  }

  useEffect(() => {
    mySdkStore.sdk.onParticipantLeaveRtcRoom = onParticipantLeaveRtcRoom;
    // mySdkStore.sdk.onError = onError;
  }, []);

  const togglesAudioMute = () => {
    mySdkStore.sdk.setLocalAudioEnable({ enabled: !audioEnable }); 
    setAudioEnable(!audioEnable)
  }

  const togglesVideoMute = () => {
    mySdkStore.sdk.setLocalVideoEnable({ enabled: !videoEnable });
    setVideoEnable(!videoEnable);
  }

  // 处理主动挂断
  const handleHangup = () => {
    const msgBody: any = {
      msgType: ContentType.Rtc,
      msgContent: { rtcAction: 'hangUp' },
    };
    if (cid) {
      msgBody.toCid = cid;
    }
    const msgParams = mySdkStore.sdk.messageBuilder(msgBody);
    mySdkStore.sdk.sendMessage(msgParams).then(res => {
      onClose({ ...res, closeTime: rtcAction === 'continue' ? res.hangUpTime : '' });
    }).catch(e => {
      Toast.show(e.errorMessage || e.message);
    });//
  }

  return (<div className='rtcPageComponent'>
    {rtcAction === 'invite' &&
    <div className="avatarArea">
      <AvatarImage
        src={avatarUrl}
        style={{ margin: '16px auto', borderRadius: '8px' }}
        fit='cover'
        width={100}
        height={100}
        nickName={nickName}
        userName={userName}
        userId={userId}
      />
      正在呼叫中
    </div>
    }
    {/* {isVedioVisible ?  : null} */}
    <div style={{ opacity: rtcAction !== 'invite' ? 1 : 0 }}>
      <video autoPlay={true} mute="true" playsInline={true} id="implusPublishVideoElementId"/>
      <video autoPlay={true} mute="true" playsInline={true} id="implusSubscribeVideoElementId"/>
      <video autoPlay={true} mute="true" playsInline={true} id="implusSubscribeVideoElementId2"/>
    </div>
    <audio autoPlay={true} id="implusSubscribeAudioElementId"/>
    <audio autoPlay={true} id="implusSubscribeAudioElementId2"/>
    <div className="iconButtonArea">

      <div>
        <div className="iconWrap" onClick={togglesVideoMute}>
          {videoEnable ? <Camera /> : <CameraDisabled />}
        </div>
        {`${videoEnable ? '已开启' : '已关闭'}视频`}
      </div>

      <div>
        <div className="iconWrap" onClick={togglesAudioMute}>
          {audioEnable ? <AudioOutlined style={{ fontSize: 32, paddingTop: '10px', color: '#fff', lineHeight: '56px' }} /> : <AudioMutedOutlined style={{ fontSize: 32, paddingTop: '10px', color: '#fff', lineHeight: '56px' }} />}
        </div>
        {`${audioEnable ? '已开启' : '已关闭'}麦克风`}
      </div>
      <div>
        <div className="iconWrap reject" onClick={handleHangup}>
          <HangUp />
        </div>
        挂断
      </div>
      {/* <div>
        <div className="iconWrap" onClick={handleHangup}>
          <CameraOutlined style={{ fontSize: 32, color: '#fff', lineHeight: '56px' }} />
        </div>
        翻转摄像头
      </div> */}
    </div>
  </div>
  )
}